<script setup>
  // 响应式任务数组
  import {ref} from "vue"
  const taskList = ref([
    {id: 1, isFilish: false, taskContent: "吃饭"},
    {id: 2, isFilish: false, taskContent: "在20：00之前完成这个项目"},
    {id: 3, isFilish: false, taskContent: "在22：20之前完成3h的新课学习"},
    {id: 4, isFilish: false, taskContent: "完成肩部锻炼"},
    {id: 5, isFilish: false, taskContent: "在1点钟之前睡觉"},
  ])
  // 响应式任务名
  const taskContent = ref("")
  // 清除所有任务
  const onClear = () => {
    if (taskList.value.length === 0) {
      return window.alert("任务列表为空！")
    }
    if (window.confirm("确认清空所有任务吗？")) {
      taskList.value = []
    }
  }
  //删除单个任务
  const onDelete = (i) => {
    if (window.confirm("确认删除这个任务吗？")) {
      taskList.value.splice(i, 1)
    }
  }
  // 新增单个任务
  const onAdd = () => {
    // 1.初步处理
    taskContent.value = taskContent.value.trim()
    // 2.非空校验
    if (!taskContent.value) {
      return window.alert("添加任务不可为空！")
    }
    // 3.尾插新任务
    // 使用时间戳作为id
    taskList.value.push({
      id: Date.now(), isFilish: false, taskContent: taskContent.value
    })
    // 4.输入框置空
    taskContent.value = ""
  }

</script>

<template>
    <div class="container">
      <p class="title">佳佳的记事本</p>
      <div class="main">
        <!-- 头部 -->
        <header>
          <input type="text" placeholder="请输入任务" class="newTask" v-model="taskContent">
          <span class="pushTask" @click="onAdd()">添加任务</span>
        </header>
        <!-- 内容 -->
        <section class="content">
          <ul>
            <li v-for="item, index in taskList" :key="item.id">
              <table>
                <tr>
                  <td class="serial">{{ index+1 }}.</td>
                  <td class="task">{{ item.taskContent }}</td>
                  <td class="delBtn" @click="onDelete(index)">
                    <img src="./static/删除.png" alt="" height="19px">
                  </td>
                </tr>
              </table>
            </li>
          </ul>
        </section>
        <!-- 尾部 -->
        <footer>
          <span>合计：{{ taskList.length }}</span>
          <span class="btn" @click="onClear()">清空任务</span>
        </footer>
      </div>
    </div>
</template>

<style>
  * {
    box-sizing: border-box;
  }
  /* 设置主页面 */
  body {
    background-color: rgb(244, 244, 244);
  }
  /* 设置基本布局 */
  .container {
    width: 500px;
    margin: 200px auto 0px;
  }
  /* 设置标题样式 */
  .container .title {
    font-family: "幼圆";
    text-align: center;
    font-size: 50px;
    letter-spacing: 8px;
    color: rgb(181, 76, 89);
    margin: 20px auto;
  }
  /* 设置主体背景样式 */
  .main {
    width: 480px;
    margin: 0px auto;
    border: #ccc solid 1px;
    border-radius: 2px;
    box-shadow: 3px 3px 8px 1px rgba(0, 0, 0, 0.3);
    background-color: #fff;
  }
  /* 设置输入框样式 */
  .newTask {
    width: 340px;
    height: 50px;
    border: 2px solid rgb(181, 76, 89);
    border-right: none;
    border-radius: 8px 0 0 8px;
    border-color: rgb(181, 76, 89);
    padding: 0 1em;

    font-family: "幼圆";
    font-size: 20px;
    
  }
  input::placeholder {
    font-size: 20px;
    font-style: italic;
    color: rgba(222, 222, 222, 0.9);
  }
  input:focus {
    outline: none;
  }
  /* 设置新增按钮样式 */
  .pushTask {
    display: inline-block;
    margin: 0;
    width: 100px;
    height: 50px;
    border: 3px solid rgb(181, 76, 89);
    border-left: none;
    border-radius: 0 8px 8px 0;
    background-color: rgb(181, 76, 89);

    color: #eee;
    font-family: "幼圆";
    font-size: 18px;
    text-align: center;
    line-height: 40px;

    cursor: pointer;
  }
  /* 设置头部样式 */
  header {
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }
  /* 设置内容样式 */
  .content {
    padding: 0 10px;
  }
  .content ul{
    list-style: none;
    padding: 0;
  }
  .content li{
    font-family: "幼圆";
    font-size: 20px;
    color: #777;

    margin: 10px 0;
    padding: 10px 14px;
    border-bottom: #ccc solid 1px;;
  }
  .content .serial {
    display: inline-block;
    width: 50px;
  }
  .container .task {
    width: 350px;
  }
  /* 设置删除按钮样式 */
  .content .delBtn {
    display: none;
    padding: 0;
    width: 20px;
    cursor: pointer;
  }
  .content li:hover .delBtn {
    display: inline-block;
  }
  /* 设置尾部样式 */
  footer {
    padding: 0 30px 30px 30px;
    display: flex;
    justify-content: space-between;

    font-family: "幼圆";
    font-size: 16px;
    color: #bbb;
  }
  footer .btn{
    cursor: pointer;
  }
  footer .btn:hover{
    text-decoration: underline;
  }
</style>